<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加博文</title>
    <link rel="stylesheet" th:href="@{/static/kindeditor/themes/default/default.css}" />
    <link rel="stylesheet" th:href="@{/static/kindeditor/plugins/code/prettify.css}" />
    <link rel="stylesheet" th:href="@{/static/backstage/css/layui.css}" />
    <script charset="utf-8" th:src="@{/static/kindeditor/kindeditor-all.js}"></script>
    <script charset="utf-8" th:src="@{/static/kindeditor/lang/zh-CN.js}"></script>
    <script charset="utf-8" th:src="@{/static/kindeditor/plugins/code/prettify.js}"></script>
    <script>
        var editor1;
        KindEditor.ready(function(K) {
            editor1 = K.create('textarea[name="articleContent"]',{
                    //参数配置
                    width : '95%',
                    allowImageRemote: false,
                    minHeight: '600',
                    resizeType : 0,//禁止拉伸，1可以上下拉伸，2上下左右拉伸
                    filterMode: false,//true时过滤HTML代码，false时允许输入任何代码。
                    cssPath :[ '../kindeditor/plugins/bockquote/bockquote.css'],
                    itmes:  [
                        'source', '|', 'code',  '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen',
                        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
                        'table', 'hr', 'emoticons', 'pagebreak','|','bockquote'
                    ],
                }
            );
            //  prettyPrint();
        });
    </script>
</head>
<body>
<!--设置滚动条-->
<style>
    body::-webkit-scrollbar{
        width:10px;
    }
    body::-webkit-scrollbar-track{
        /*background: #999;*/
        background: #fff;
        border-radius:2px;
    }
    body::-webkit-scrollbar-thumb{
        /*background: red;*/
        background: #fff;
        border-radius:10px;
    }
    body::-webkit-scrollbar-thumb:hover{
        /*background: #333;*/
        background: #fff;
    }
    body::-webkit-scrollbar-corner{
        /*background: #179a16;*/
        background: #fff;
    }
</style>
<div id="add_article_content" style="display: block;width: 95%;height: auto;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加博文</legend>
    </fieldset>
    <form class="layui-form" id="post_form" th:action="@{/backstage/insertArticle}" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">博文标题</label>
            <div class="layui-input-block">
                <input name="articleId" type="hidden" value="">
                <input id="articleTitle" autocomplete="off" class="layui-input" lay-verify="required" name="articleTitle" type="text">
            </div>
            <div th:id="'articleTitleNer'" style="display: none;position: absolute;color: red;top: 11%;left: 86%;font-weight: 600;"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select id="categoryName" lay-verify="required" lay-filter="category" name="categoryName">
                    <option value="" selected></option>
                    <!--循环遍历分类-->
                    <option th:each="categoryModel:${categoryModels}" th:value="${categoryModel.categoryId}">[[${categoryModel.categoryName}]]</option>
                    <!--遍历END-->
                </select>
            </div>
            <div th:id="'categoryNameNer'" style="display: none;position: absolute;color: red;top: 18.5%;left: 85%;font-weight: 600;"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-block" style="width: 86%;">
                <!--循环遍历标签-->
                <input lay-filter="tagName" th:id="'tagName'" th:each="tagModel:${tagModels}" name="tagName" th:value="${tagModel.tagId}" th:title="${tagModel.tagName}" type="checkbox">
                <!--遍历END-->
            </div>
            <div th:id="'tagNameNer'" style="display: none;position: absolute;color: red;top: 26%;left: 91%;font-weight: 600;"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">博文封面</label>
            <div style="width: 300px;height: 300px;border: 1px solid #e6e6e6;margin-left: 110px;">
                <img id="coverImg" src="" style="width: auto;height: 300px;">
            </div>
            <div th:id="'coverImgNer'" style="display: none;position: absolute;color: red;top: 82.3%;left: 20%;font-weight: 600;"></div>
            <input id="coverImgInput" name="articleCover" type="hidden">
            <div style="width: 80px;text-align: center;color: #fff;height: 30px;background-color: #009688;font-size: 14px;border-radius: 2px;line-height: 30px;margin-left: 10.7%;margin-top: 1%;padding: 3px;">
                <input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="coverImg_file" onchange="showImg()"
                       style="opacity: 0;position: absolute;"
                       type="file">
                选择图片
            </div>
        </div>
        <!--富文本器的引入-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">博文内容</label>
            <div class="layui-input-block">
                <textarea th:id="'articleContent'" name="articleContent" placeholder="请输入内容"></textarea>
            </div>
            <div th:id="'contentNer'" style="display: none;position: absolute;color: red;top: 181%;left: 10.5%;font-weight: 600;"></div>
        </div>
        <!--富文本器END-->
        <div style="height: 20px"></div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="post_form_btn" lay-submit>立即提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/static/backstage/js/layui.js}"></script>
<script th:src="@{/static/backstage/js/jquery-2.1.1.js}"></script>
<script>
    //图片
    function showImg() {
        var file = document.getElementById('coverImg_file').files[0];
        var size = file.size / 1024;
        // console.log(size);
        if (size > 1024) {
            layer.msg('图片只能小于1M，请重新选择！', { icon: 5 });
        } else {
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function (re) {
                $('#coverImg').attr("src", re.target.result);
                $('#coverImgInput').attr("value", re.target.result);
            }
        }
    }
    //获取标签验证
    layui.use('form', function(){
        var form = layui.form,
            $ = layui.$;
        // 下拉框监听
        form.on('select(category)',function (data){
            // console.log(data.value);
            if (data.value == ""){
                layer.msg('请选择一项分类！', { icon: 5 });
                return false;
            }
        })
        // 复选框监听
        form.on('checkbox(tagName)', function (data) {
            // console.debug(data);
            var len = $("input:checked").length;
            if (len < 1) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg('请至少选择一项标签！', { icon: 5 });
                return false;
            }
        });
        //submit事件
        form.on('submit', function(data){
            //复选框
            var len = $("input:checked").length;
            if (len < 1){
                layer.msg('请至少选择一项标签！', { icon: 5 });
                return false;
            }
            //提交封面验证
            var coverImg = $("#coverImgInput").val();
            if (coverImg == ""){
                layer.msg('请选择上传封面！', { icon: 5 });
                return false;
            }
            //提交博文验证
            var content = editor1.html();
            if (content==""){
                layer.msg('请输入博文内容！', { icon: 5 });
                return false;
            }
            //执行到此，全部提交
            setTimeout(function () {
                layer.msg('提交成功！', { icon: 6 });
            },1500)
        });
    })
</script>
</html>